<template>
	<div class="singer-details">
		<!-- 歌手详情页头部 start -->
		<div class="details-hd">
			<div class="singer-img">
				<img :src="singerDetails.imgurl" />
			</div>
			<div class="singer">
				<div class="singer-name">
					{{ singerDetails.singername }}
				</div>
				<div class="singer-count">
					<span> 单曲数量：{{ singerDetails.songcount }} </span>
					<span>MV数量：{{ singerDetails.mvcount }} </span>
					<span> 唱片数量：{{ singerDetails.albumcount }} </span>
				</div>
			</div>
		</div>
		<!-- 歌手详情页头部 end -->

		<!-- 歌手详情页身体 start -->
		<div class="details-bd" v-if="singerSongs.length">
			<el-tabs v-model="activeName">
				<!-- 歌手单曲 start -->
				<el-tab-pane
					:label="`单曲 (${singerDetails.songcount})`"
					name="first"
				>
					<el-row class="title">
						<el-col :span="16"> 歌曲名 </el-col>
						<el-col :span="6"> 专辑 </el-col>
						<el-col :span="2" class="time">
							时间
						</el-col>
					</el-row>
					<el-row
						class="content"
						v-for="(item, index) of singerSongs"
						:key="index"
					>
						<el-col :span="16" class="filename">
							<span @click="getPlayMusic(item.hash)">{{
								item.filename.split(" - ")[1]
							}}</span
							><i
								@click="targetvideoDetails(item.mvhash)"
								v-if="item.mvhash"
							>
								&#xe6af;
							</i>
						</el-col>
						<el-col :span="6" class="album">
							<span
								@click="targetAlbumDetails(item.album_id)"
								v-if="item.remark"
							>
								{{ item.remark }}
							</span>
							<span v-else>
								暂无专辑
							</span>
						</el-col>
						<el-col :span="2" class="time">
							{{ item.duration }}
						</el-col>
					</el-row>
				</el-tab-pane>
				<!-- 歌手单曲 end -->

				<!-- 歌手mv start -->
				<el-tab-pane
					:label="`视频 (${singerDetails.mvcount})`"
					name="second"
				>
					<el-row class="singer-mv">
						<el-col
							:xs="6"
							:sm="6"
							:md="6"
							:lg="4"
							v-for="item of singerMv"
							:key="item.hash"
						>
							<div @click="targetvideoDetails(item.hash)">
								<div class="img">
									<img :src="item.imgurl" alt="" />
									<div class="fill-screen">
										<i>&#xe627;</i>
									</div>
								</div>
								<div class="title" :title="item.filename">
									{{ item.filename }}
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<!-- 歌手mv end -->

				<!-- 个人资料 start -->
				<el-tab-pane label="个人资料" name="third">
					{{ singerDetails.intro }}
				</el-tab-pane>
			</el-tabs>
			<!-- 个人资料 end -->
		</div>
		<!-- 歌手详情页身体 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 歌手id
			singerid: sessionStorage.getItem("singerid"),
			// 歌手姓名
			singername: sessionStorage.getItem("singername"),
			// 歌手详情
			singerDetails: {},
			// 歌手的歌曲
			singerSongs: [],
			// 歌手的mv
			singerMv: [],
			// 选项卡默认选中第一个
			activeName: "first",
		};
	},
	methods: {
		// 获取歌手的详情
		getSingerDetails() {
			// 歌手的音乐
			this.axios
				.get(
					`/api-singer-details/song?sorttype=2&version=9108&identity=3&plat=0&pagesize=100&singerid=${this.singerid}&area_code=1&page=1&with_res_tag=1`
				)
				.then((res) => {
					let result = res.data
						.replace(/<!--KG_TAG_RES_START-->/g, "")
						.replace(/<!--KG_TAG_RES_END-->/g, "");
					let results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					this.singerSongs = results.data.info;
				});
			// 歌手的介绍
			this.axios
				.get(
					`/api-singer-details/info?singerid=${this.singerid}&with_res_tag=1`
				)
				.then((res) => {
					let result = res.data
						.replace(/<!--KG_TAG_RES_START-->/g, "")
						.replace(/<!--KG_TAG_RES_END-->/g, "");
					let results = JSON.parse(result);
					results.data.imgurl = results.data.imgurl.replace(
						/\/{size}/,
						""
					);
					this.singerDetails = results.data;
				});
			// 歌手mv
			this.axios
				.get(
					`/api-singer-details/mv?singername=${this.singername}&pagesize=20&singerid=${this.singerid}&page=1&with_res_tag=1`
				)
				.then((res) => {
					let result = res.data
						.replace(/<!--KG_TAG_RES_START-->/g, "")
						.replace(/<!--KG_TAG_RES_END-->/g, "");
					let results = JSON.parse(result);
					this.singerMv = results.data.info;
				});
		},
		targetvideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/VideoDetails/${videohash}`);
		},
		// 点击播放音乐
		getPlayMusic(hash) {
			this.$store.dispatch("updatePlayMusic", {
				hash: hash,
				this: this,
			});
		},
		// 点击跳转到专辑详情
		targetAlbumDetails(albumid) {
			this.$router.push(`/albumDetails/${albumid}`);
		},
	},
	mounted() {
		this.getSingerDetails();
	},
};
</script>
<style lang="scss">
.singer-details {
	// 歌手详情页头部 start
	.details-hd {
		display: flex;
		.singer-img {
			width: 100px;
			height: 100px;
			img {
				width: 100%;
				border-radius: 50%;
			}
		}
		.singer {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 20px;
			height: 100px;
			.singer-name {
				font-size: 25px;
				font-weight: 700;
				color: #333;
			}
			.singer-count {
				span {
					font-size: 14px;
					margin-right: 20px;
					color: #858585;
				}
			}
		}
	}
	// 歌手详情页头部 end

	// 歌手详情页身体 start
	.details-bd {
		margin-top: 20px;
		.el-tabs__content {
			padding-right: 30px;
			#pane-first {
				.title {
					padding: 0 20px;
					height: 44px;
					border-bottom: 1px solid #f5f5f5;
					.el-col {
						height: 44px;
						line-height: 44px;
						font-size: 14px;
						color: #858585;
						&.time {
							text-align: right;
						}
					}
				}
				.content {
					display: flex;
					height: 44px;
					padding: 0 20px;
					.el-col {
						line-height: 100%;
						line-height: 44px;
						font-size: 14px;
						span {
							cursor: pointer;
							&:hover {
								color: #5192fe;
							}
						}
						&.album {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						&.time {
							text-align: right;
							color: #858585;
							font-size: 13px;
						}
						&.filename {
							align-items: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							i {
								position: absolute;
								font-family: "iconfont";
								font-size: 23px;
								color: #5192fe;
								margin-left: 5px;
								cursor: pointer;
								transform: translateY(1px);
							}
						}
					}
					&:hover {
						background-color: #f9f9f9;
					}
				}
			}
			#pane-second {
				.singer-mv {
					.el-col {
						margin-bottom: 20px;
						cursor: pointer;
						.img {
							overflow: hidden;
							position: relative;
							width: 90%;
							border-radius: 10px;
							img {
								width: 100%;
							}
							.fill-screen {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.4);
								i {
									position: absolute;
									top: calc(50% - 20px);
									left: calc(50% - 20px);
									font-size: 40px;
									color: #fff;
									font-family: "iconfont";
									&:hover {
										color: #5192fe;
									}
								}
							}
							&:hover {
								.fill-screen {
									display: block;
								}
							}
						}
						.title {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							width: 90%;
							margin-top: 10px;
							font-size: 14px;
							color: #333;
							&:hover {
								color: #5192fe;
							}
						}
					}
				}
			}
			#pane-third {
				font-size: 14px;
				color: #858585;
				line-height: 22px;
				text-indent: 2em;
			}
		}
	}
	// 歌手详情页身体 end
}
</style>
